import React, { Component } from 'react'
import { StyleSheet, View, Text, ScrollView, Image } from 'react-native'

import { connect } from 'react-redux'
import HeaderDefault from '../../components/header/HeaderDefault'
import { theme_app, theme_text, theme_btnColor } from '../../utils/appTheme'
import Button from '../../components/Button'

class Mine extends Component {
  constructor(props) {
    super(props)
    this.state = {}
    this._clickExetButton = this._clickExetButton.bind(this)
    this._renderHeaderIcon = this._renderHeaderIcon.bind(this)
  }
  static navigationOptions = ({ navigation }) => ({
    header: (
      <HeaderDefault
        backBtnOnPress={() => {
          navigation.goBack()
        }}
      />
    )
  })

  componentDidMount() {}

  _clickExetButton() {
    this.props.navigation.navigate('Login')
  }

  _renderHeaderIcon() {
    return (
      <View style={styles.headerSection}>
        <Image
          style={{ width: 60, height: 60 }}
          source={require('./src/nurseHeader.jpeg')}
        />
        <Text style={styles.header_title}>
          {this.props.user_info.real_name}
        </Text>
      </View>
    )
  }

  render() {
    return (
      <ScrollView
        style={{ backgroundColor: theme_app.bg_color }}
        contentContainerStyle={styles.container}
      >
        <View style={{ height: 10 }} />
        {this._renderHeaderIcon()}

        <View style={{ height: 20 }} />

        <Button
          style={[
            styles.buttonCommit,
            { backgroundColor: theme_btnColor.main_color }
          ]}
          onPress={this._clickExetButton}
        >
          <Text
            style={{
              fontSize: 18,
              color: theme_text.background_Color
            }}
          >
            退出登录
          </Text>
        </Button>
      </ScrollView>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: theme_app.bg_color
  },
  headerSection: {
    paddingLeft: 16,
    paddingRight: 16,
    paddingTop: 10,
    paddingBottom: 10,
    width: screenWidth,
    height: 80,
    backgroundColor: 'white',
    flexDirection: 'row',
    alignItems: 'center'
  },
  header_title: {
    fontSize: theme_text.large_font,
    paddingLeft: 10
  },
  buttonCommit: {
    width: screenWidth - 30,
    // height: 46,
    borderRadius: 6
  }
})

function select(store) {
  return {
    user_info: store.userInfo.user_info
  }
}

export default connect(select)(Mine)
